<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>白名单列表</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			body{
				background-color: #fff;
			}
			/* 字体颜色-- --start */
			.font-color-1 {
				color: #101010;
				font-size: 16px;
			}
			.font-color-2 {
				color: #999999;
				font-size: 15px;
			}
			/* 字体颜色----end */
			.white-list {
				padding: 0 15px;
			}
			.white-list-item {
				border-bottom: #e6e6e6 1px solid;
				text-align: right;
				padding: 10px 0;
				color: #101010;
				font-size: 16px;
			}
			.white-list-item-name {
				float: left;
			}
			.white-list-item-Password{
				margin-right:  25px
			}
			.white-list-item-phone {
				margin-right: 15px;
			}
			.white-list-item-status {
				float: right;
				background-repeat: no-repeat;
				background-position: center right;
				background-image: url(../image/icon_valid_selected.png);
				background-size: 20px 20px;
				min-height: 20px;
			}
			.white-list-item-status.notactive {
				background-image: url(../image/icon_not_active_selected.png);
			}
			.white-list-item-status.stop {
				background-image: url(../image/icon_stop_selected.png);
			}
			.white-list-item-sub {
				min-width: 20px;
			}
			body .layui-layer-content {
				border-radius: 10px;
			}
			body .layui-layer-content .layer-more-parent {
				padding-left: 10px;
				padding-right: 10px;
			}
			body .layui-layer-content .layer-more-ul > li {
				height: 50px;
				line-height: 50px;
				text-align: center;
				width: 200px;
				border-bottom: #C2C2C2 1px solid;
			}
			body .layui-layer-content .layer-more-ul > li:nth-last-child(1) {
				border-bottom: 0;
			}
			/* 深职院白名单列表item样式-----start */
			.white-list-item-szy {
				height: 70px;
				border-bottom: #e6e6e6 1px solid;
			}
			.white-list-item-szy > div {
				margin-top: 10px;
			}
			.white-list-item-szy-sub1 {
				float: left;
			}
			.white-list-item-szy-sub2 {
				float: right;
			}
			.white-list-item-szy-sub3 {
				float: right;
				margin-left: 20px;
			}
			.white-list-item-szy-sub1-d1 {
			}
			.white-list-item-szy-sub1-d2 {
				margin-top: 10px;
			}
			.white-list-item-szy-identity {
			}
			.white-list-item-status-szy {
				width: 20px;
			}
			.lhjdb-list-item-div {
				display: flex;
				display: -webkit-flex;
				display: -webkit-box;
				-webkit-justify-content: space-between;
				-webkit-box-pack: justify;
				align-items: center;
				-webkit-align-items: center;
				-webkit-box-align: center;
			}
			/* 深职院白名单列表item样式-----end */
			/* 加载更多---------start */
			.load-more-content {
				height: 128px;
				width: 100%;
				line-height: 128px;
				text-align: center;
			}
			.load-more-content > img {
				height: 20px;
				width: 20px;
				vertical-align: middle;
			}
			.load-more-content > span {
				margin-left: 15px;
				color: #bfbfbf;
				font-size: 14px;
			}
			/* 加载更多---------end */
		</style>
	</head>
	<body>
		<div id="lhjdb-list-item-temp" style="display: none;">
			<div class="lhjdb-list-item-div">
				<div class="lhjdb-list-item-phone">
					123
				</div>
				<div>
					<div class="white-list-item-status white-list-item-sub"></div>
				</div>
			</div>
		</div>
		<div class="main">
			<ul class="white-list"></ul>
		</div>
		<!-- <div class="load-more-content">
		<img src="../image/icon_loading.png" /><span>加载中</span>
		</div> -->
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/layer/layer.js"></script>
	<script type="text/javascript" src="../script/request.js"></script>
	<script type="text/javascript">
		var areaID;
		//白名单列表初始数据
		var mListDatas;
		//白名单列表view
		var mListView;
		//点击白名单列表item的index
		var mClickIndexI = 0;
		//是否加载更多
		var isLoadMore = false;
		//搜索的内容
		var mSearchContent;
		//白名单列表页码（第几页），默认第一页
		var mPage = 1;
		//白名单列表每页数据数目(南山街道办)
		var mRowsNSJDB = 20;
		//白名单列表每页数据数目(南山街道办)
		var mRowsSZY = 20;
		apiready = function() {
			initView();
			listenerUpdateResult();
			listenerSearClick();
		};
		function initView() {
			mListView = document.getElementsByClassName('white-list')['0'];
		}

		/**
		 * 展示白名单
		 * @param {Array} datas - 白名单列表数据源(列表数据数组)
		 */
		function showList(datas) {
			//判断list之前是否有存在过，有则清除，反之不清除。
			if (mListView != null){
				mListView.innerHTML = '';
			}
			mListDatas = datas;
			var dl = mListDatas.length;
			for (var i = 0; i < dl; i++) {
				var data = mListDatas[i];
				var li = createItem(data);
				mListView.appendChild(li);
			}
			api.hideProgress();
			listenerScrollBottom();
		}

		/**
		 * 创建白名单列表item
		 * @param {JSON} data - 单个白名单成员的json数据
		 */
		function createItem(data) {
			//判断区域ID,根据区域ID显示不同的item
			areaID = $api.getStorage('areaID');
			if (areaID == AREAID_SZY) {
				return createItemSZY(data);
			} else if (areaID == AREAID_NSJDB || areaID == AREAID_CWW) {
				return createItemNSJDB(data,areaID);
			} else if (areaID == AREAID_LHJDB || areaID == AREAID_BNCZJ || areaID == AREAID_QY) {
				return createItemLHJDB(data);
			}
		}

		/**
		 * 龙华街道办 白名单列表展示item
		 * @param {JSON} data - 单个白名单成员的json数据
		 */
		function createItemLHJDB(data) {
			//状态
			var statusData = data.status;
			var li = document.createElement('li');
			li.className = 'white-list-item';
			li.innerHTML = document.getElementById('lhjdb-list-item-temp').innerHTML;
			//号码
			var phone = li.getElementsByClassName('lhjdb-list-item-phone')[0];
			//状态
			var status = li.getElementsByClassName('white-list-item-status')[0];
			if (statusData == 2) {
				//有效
				status.className = 'white-list-item-sub white-list-item-status';
			} else if (statusData == 1) {
				//未激活
				status.className = 'white-list-item-sub white-list-item-status notactive';
			} else if (statusData == 3) {
				//停用
				status.className = 'white-list-item-sub white-list-item-status stop';
			}
			//用user_name获取手机号，这与南山街道办相反
			phone.innerText = dataFaultTolerant(data.user_phone);
			//点击事件
			li.onclick = function() {
				var ll = mListView.getElementsByClassName('white-list-item').length;
				for (var ci = 0; ci < ll; ci++) {
					if (this == mListView.getElementsByClassName('white-list-item')[ci]) {
						mClickIndexI = ci;
						break;
					}
				}
				updateClick(mListDatas[mClickIndexI]);
			}
			return li;
		}

		/**
		 * 深职院白名单列表展示item
		 * @param {JSON} data - 单个白名单成员的json数据
		 */
		function createItemSZY(data) {
			//状态
			var status = data.status;
			var li = document.createElement('li');
			li.className = 'white-list-item-szy';
			li.innerHTML = '<div class="white-list-item-szy-sub1">' + '<div class="font-color-1 white-list-item-szy-sub1-d1 white-list-item-szy-name">名字' + '</div>' + '<div class="font-color-2 white-list-item-szy-sub1-d2 white-list-item-szy-identity">身份' + '</div>' + '</div>' + '<div class="white-list-item-szy-sub3">' + '<div class="white-list-item-status white-list-item-status-szy"></div>' + '</div>' + '<div class="white-list-item-szy-sub2">' + '<div class="font-color-1 white-list-item-szy-sub1-d1 white-list-item-szy-jobnumber">0' + '</div>' + '<div class="font-color-2 white-list-item-szy-sub1-d2 white-list-item-szy-time">0' + '</div>' + '</div>';
			//工号
			var jobNumber = li.getElementsByClassName('white-list-item-szy-jobnumber')[0];
			//名字
			var nameView = li.getElementsByClassName('white-list-item-szy-name')[0];
			//身份
			var identityView = li.getElementsByClassName('white-list-item-szy-identity')[0];
			//有效时间
			var timeView = li.getElementsByClassName('white-list-item-szy-time')[0];
			//状态
			var statusView = li.getElementsByClassName('white-list-item-status-szy')[0];
			jobNumber.innerText = dataFaultTolerant(data.verify_code);
			nameView.innerText = editName(dataFaultTolerant(data.name));
			identityView.innerText = dataFaultTolerant(data.type);
			timeView.innerText = dataFaultTolerant(data.valid_time);
			if (status == 1) {
				//已经启用状态
				statusView.className = 'white-list-item-status white-list-item-status-szy';
			} else if (status == 2) {
				//已经停用状态,展示为红色（报错色）
				statusView.className = 'white-list-item-status white-list-item-status-szy stop';
			} else if (status == 3) {
				//未激活状态,展示位黄色（警告色）
				statusView.className = 'white-list-item-status white-list-item-status-szy notactive';
			}
			//点击事件
			li.onclick = function() {
				var ll = mListView.getElementsByClassName('white-list-item-szy').length;
				for (var ci = 0; ci < ll; ci++) {
					if (this == mListView.getElementsByClassName('white-list-item-szy')[ci]) {
						mClickIndexI = ci;
						break;
					}
				}
				updateClick(mListDatas[mClickIndexI]);
			}
			return li;
		}

		/**
		 * 白名单列表展示item(南山街道办)
		 * @param {JSON} data - 单个白名单成员的json数据
		 */
		function createItemNSJDB(data,type) {
			//状态
			var statusData = data.status;
			var li = document.createElement('li');
			li.className = 'white-list-item';
			if(type == AREAID_NSJDB){
				li.innerHTML = '<span class="white-list-item-sub white-list-item-name"></span>' + '<span class="white-list-item-sub white-list-item-status"></span>' + '<span class="white-list-item-sub white-list-item-phone"></span>';
			}else {
				li.innerHTML = '<span class="white-list-item-sub white-list-item-name"></span>' + '<span class="white-list-item-sub white-list-item-Password"></span>' + '<span class="white-list-item-sub white-list-item-status"></span>' + '<span class="white-list-item-sub white-list-item-phone"></span>';
			}
			//名字
			var name = li.getElementsByClassName('white-list-item-name')[0];
			//号码
			var phone = li.getElementsByClassName('white-list-item-phone')[0];
			//状态
			var status = li.getElementsByClassName('white-list-item-status')[0];
			if (statusData == 2) {
				//有效
				status.className = 'white-list-item-sub white-list-item-status';
			} else if (statusData == 1) {
				//未激活
				status.className = 'white-list-item-sub white-list-item-status notactive';
			} else if (statusData == 3) {
				//停用
				status.className = 'white-list-item-sub white-list-item-status stop';
			}
			name.innerText = editName(dataFaultTolerant(data.user_name));
			phone.innerText = dataFaultTolerant(data.user_phone);

			if(type == AREAID_CWW){
				//密码
				var Password = li.getElementsByClassName('white-list-item-Password')[0];
				console.log('.....Password.....'+data.password);
				Password.innerText = data.password;
			}
			//点击事件
			li.onclick = function() {
				var ll = mListView.getElementsByClassName('white-list-item').length;
				for (var ci = 0; ci < ll; ci++) {
					if (this == mListView.getElementsByClassName('white-list-item')[ci]) {
						mClickIndexI = ci;
						break;
					}
				}
				updateClick(mListDatas[mClickIndexI]);
			}
			return li;
		}

		/**
		 * 搜索的方法
		 * @param {String}  searchContent - 要搜索的内容
		 */
		function searchMethod(searchContent) {
			//没加载更多一次，代表增加了一页。
			mPage++;
			areaID = $api.getStorage('areaID');
			if (areaID == AREAID_SZY) {
				searchMethod1(searchContent);
			} else if (areaID == AREAID_NSJDB || areaID == AREAID_CWW) {
				searchMethod2(searchContent);
			} else if (areaID == AREAID_LHJDB || areaID == AREAID_BNCZJ || areaID == AREAID_QY) {
				searchMethod2(searchContent);
			}
		}

		/**
		 * 搜索的方法(深职院)
		 * @param {Object}  searchContent - 搜索输入的view的对象
		 */
		function searchMethod1(searchContent) {
			if (!isLoadMore) {
				api.showProgress({
				});
			}
			//搜索请求
			whiteListManage.search(mPage, mRowsSZY, 0, 0, searchContent, function(result) {
				if (result) {
					//解析返回数据
					console.log('搜索结果' + JSON.stringify(result));
					if (result.rows.length == 0) {
						if (!isLoadMore) {
							api.hideProgress();
							api.toast({
								msg : '没有满足条件的结果'
							});
							clearListView();
						} else {
							//加载失败，页数不变。
							loadMoreTip(false);
						}
					} else {
						//是否为加载更多，是，就执行加载更多的函数；否，则执行初次展示列表的函数。
						if (isLoadMore) {
							loadMoreDatas(result.rows);
						} else {
							showList(result.rows);
						}
					}
				} else {
					if (!isLoadMore) {
						api.hideProgress();
					} else {
						loadMoreTip(true);
					}
					api.toast({
						msg : '连接服务器失败'
					});
				}
			});
		}

		/**
		 *搜索(南山街道办)
		 */
		function searchMethod2(searchContent) {
			if (!isLoadMore) {
				api.showProgress({
				});
			}
			//搜索请求
			whiteListManage.search2(mPage, mRowsNSJDB, searchContent, areaID, function(result) {
				if (result) {
					//解析返回数据
					console.log('搜索结果' + JSON.stringify(result));
					var code = result.code;
					if (code == 0) {
						if (!isLoadMore) {
							api.hideProgress();
							api.toast({
								msg : '没有满足条件的结果'
							});
							clearListView();
						} else {
							loadMoreTip(false);
						}
					} else {
						//是否为加载更多，是，就执行加载更多的函数；否，则执行初次展示列表的函数。
						if (isLoadMore) {
							loadMoreDatas(result.list);
						} else {
							showList(result.list);
						}
					}
				} else {
					if (!isLoadMore) {
						api.hideProgress();
					} else {
						loadMoreTip(true);
					}
					api.toast({
						msg : '连接服务器失败'
					});
				}
			});
		}

		/**
		 * 编辑“名字”，使其显示的长度小于等于8
		 */
		function editName(name) {
			//如果名字长度大于8，那么只显示前八个字符。
			var maxL = 8;
			if (name.length > maxL) {
				name = name.substr(0, maxL);
			}
			return name;
		}

		/**
		 * 初始化“加载更多”的变量和请求。以便不干扰后续的搜索和加载更多的操作。
		 */
		function initLoadMoreDatas() {
			mPage = 0;
			isLoadMore = false;
			api.cancelAjax({
				tag : 'search'
			});
			hideLoadMoreView();
		}

		/**
		 * 加载更多 成功之后将数据添加到列表的后面
		 * @param {Object} datas - 白名单item数据数组
		 */
		function loadMoreDatas(datas) {
			//添加items到mListView
			var dl = datas.length;
			for (var j = 0; j < dl; j++) {
				var data = datas[j];
				//添加数据到mListDatas
				mListDatas.push(data);
				var li = createItem(data);
				mListView.appendChild(li);
			}
			isLoadMore = false;
			hideLoadMoreView();
		}

		/**
		 * 加载更多的失败提示以及处理方法
		 * @param {Boolean} isFailure - 是否是失败了，是，不提示；否，提示没有更多数据。
		 */
		function loadMoreTip(isFailure) {
			//加载失败，页数不变。
			mPage--;
			if (!isFailure) {
				api.toast({
					msg : '没有更多数据了'
				});
			}
			isLoadMore = false;
			hideLoadMoreView();
		}

		/**
		 * 展示“加载更多”的view
		 */
		function showLoadMoreView() {
			var loadView = document.createElement('div');
			loadView.className = 'load-more-content';
			loadView.innerHTML = '<img src="../image/icon_loading.png" /><span>加载中</span>';
			document.getElementsByTagName('body')[0].appendChild(loadView);
		}

		/**
		 * 隐藏“加载更多”的view
		 */
		function hideLoadMoreView() {
			var loadViews = document.getElementsByClassName('load-more-content');
			if (loadViews.length != 0) {
				document.getElementsByTagName('body')[0].removeChild(loadViews[0]);
			}
		}

		/**
		 * 更新
		 * @param {Object} data - 白名单item数据
		 */
		function updateClick(data) {
			api.openWin({
				name : 'page_update_add',
				url : './page_update_add.html',
				pageParam : data,
				allowEdit : true
			});
		}

		/**
		 * 更新白名单列表item
		 * @param {Object} data - 白名单item数据
		 */
		function updateWhiteList(data) {
			var status = data.status;
			//更新数据
			mListDatas[mClickIndexI] = data;
			//更新view
			var newItem = createItem(data);
			if (areaID == AREAID_SZY) {
				mListView.replaceChild(newItem, mListView.getElementsByClassName('white-list-item-szy')[mClickIndexI]);
			} else if (areaID == AREAID_NSJDB || areaID == AREAID_CWW) {
				mListView.replaceChild(newItem, mListView.getElementsByClassName('white-list-item')[mClickIndexI]);
			} else if (areaID == AREAID_LHJDB || areaID == AREAID_BNCZJ || areaID == AREAID_QY) {
				mListView.replaceChild(newItem, mListView.getElementsByClassName('white-list-item')[mClickIndexI]);
			}
		}

		/**
		 * 移除白名单列表item(无深职院)
		 */
		function deleteDetail(data) {
			//移除view
			mListView.removeChild(mListView.getElementsByClassName('white-list-item')[mClickIndexI]);
			//移除数据
			mListDatas.splice(mClickIndexI, 1);
		}

		/**
		 * 重新加载listview数据
		 */
		function reloadListView() {
			//点击了“搜索”，代表从第一页重新搜索,并且清除掉“加载更多的请求”。
			initLoadMoreDatas();
			searchMethod(mSearchContent);
		}

		/**
		 *	清除listview数据
		 */
		function clearListView() {
			console.log('mListDatas=' + mListDatas + '   mListView=' + mListView);
			if (mListDatas != null && mListView != null) {
				mListDatas.splice(0);
				mListView.innerHTML = '';
			}
		}

		//设置“更新结果”的监听，以便能够及时更新白名单列表显示
		function listenerUpdateResult() {
			api.addEventListener({
				name : 'updateWhiteListItem'
			}, function(ret, err) {
				reloadListView();
			});
		}

		//设置“滑动到底部”事件监听
		function listenerScrollBottom() {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				//判断列表是否已经到达屏幕底部，是，就代表可以加载更多；否，就不让加载更多。
				if (mListView.offsetHeight >= api.frameHeight && !isLoadMore) {
					isLoadMore = true;
					showLoadMoreView();
					searchMethod(mSearchContent);
				}
			});
		}
// not understood by git-svn
		//设置“搜索”点击事件监听。
		function listenerSearClick() {
			api.addEventListener({
				name : 'searchClick'
			}, function(ret, err){
				if (ret) {
					var searchContent = ret.value.searchContent;
					//点击了“搜索”，代表从第一页重新搜索,并且清除掉“加载更多的请求”。
					mSearchContent = searchContent;
					reloadListView();
				}
			});
		}
	</script>
</html>
